<h2>Default Themes</h2>
<p>Trilium comes with a couple pre-installed color themes, with the default
  being a light theme. To switch to a dark theme or any other available theme,
  navigate to the Options menu (accessible via the app icon in the top-left
  corner), select the Appearance tab, and choose your preferred theme.</p>
<p>
  <img src="Themes_dark-theme.png" alt="Dark Theme">
</p>
<h2>Creating Custom CSS Themes</h2>
<p>Trilium supports custom user themes, allowing you to personalize the application's
  appearance. To create a custom theme, follow these steps:</p>
<ol>
  <li><strong>Create a CSS Code Note</strong>: Start by creating a new <a href="#root/_help_6f9hih2hXXZk">code note</a> with
    the <code>CSS</code> type.</li>
  <li><strong>Annotate with</strong>  <code>#appTheme</code>: Add the <a href="#root/_help_zEY4DaJG4YT5">attribute</a>  <code>#appTheme=my-theme-name</code> to
    your note, where <code>my-theme-name</code> is the name of your custom theme.</li>
  <li><strong>Define Your Styles</strong>: Write your custom CSS within the
    note. Below is an example of a custom theme:</li>
</ol><pre><code class="language-text-x-trilium-auto">@font-face {
  font-family: 'Raleway';
  font-style: normal;
  font-weight: 400;
  src: url('/custom/fonts/raleway.woff2') format('woff2');
}

:root {
    --main-font-family: 'Raleway' !important;
    --main-font-size: normal;
    --tree-font-family: inherit;
    --tree-font-size: normal;
    --detail-font-family: inherit;
    --detail-font-size: normal;
    --detail-text-font-family: 'Garamond' !important;

    --main-background-color: #404552;
    --main-text-color: #AFB8C6;
    --main-border-color: #AFB8C6;
    --accented-background-color: #383C4A;
    --more-accented-background-color: #2F343F;
    --header-background-color: #383C4A;
    --button-background-color: #2F343F;
    --button-disabled-background-color: #404552;
    --button-border-color: #333;
    --button-text-color: #AFB8C6;
    --button-border-radius: 2px;
    --primary-button-background-color: #6c757d;
    --primary-button-text-color: white;
    --primary-button-border-color: #6c757d;
    --muted-text-color: #86919F;
    --input-text-color: #AFB8C6;
    --input-background-color: #404552;
    --hover-item-text-color: white;
    --hover-item-background-color: #4877B1;
    --active-item-text-color: white;
    --active-item-background-color: #4877B1;
    --menu-text-color: #AFB8C6;
    --menu-background-color: #383C4A;
    --tooltip-background-color: #383C4A;
    --link-color: lightskyblue;
    --modal-background-color: #404552;
    --modal-backdrop-color: black;
    --scrollbar-border-color: rgba(175, 184, 198, 0.5);
}

body .note-detail-text {
    font-size: 120%;
}

body .CodeMirror {
    filter: invert(100%) hue-rotate(180deg);
}</code></pre>
<h3>Activating Your Custom Theme</h3>
<p>Once you've created your custom theme:</p>
<ol>
  <li>Go to "Menu" -&gt; "Options" -&gt; "Appearance."</li>
  <li>In the theme selection dropdown, you should see your custom theme listed
    under the name you provided with the <code>#appTheme</code>  <a href="#root/_help_zEY4DaJG4YT5">label</a>.</li>
  <li>Select your custom theme to activate it.</li>
</ol>
<p>If you make changes to your theme, press <kbd>Ctrl</kbd> + <kbd>R</kbd> to
  reload the frontend and apply your updates.</p>
<h3>Sharing and Importing Themes</h3>
<p>Custom themes can be exported as <code>.tar</code> archives, which can be
  shared with other users. However, be cautious when importing themes from
  untrusted sources, as they may contain executable scripts that could pose
  security risks.</p>
<p>An example user theme, <em>Steel Blue</em>, is available in the demo document.</p>
<p>
  <img src="Themes_steel-blue.png" alt="Steel Blue Theme">
</p>
<h3>Using Custom CSS for Specific Purposes</h3>
<p>In addition to full themes, Trilium allows for custom CSS that isn't tied
  to a theme. This can be particularly useful in scripting contexts, where
  you might want to modify specific UI elements, such as changing the colors
  of notes in the tree view.</p>
<h3>Applying Custom CSS</h3>
<p>To use custom CSS:</p>
<ol>
  <li><strong>Create a CSS Code Note</strong>: Create a new&nbsp;<a class="reference-link"
    href="#root/_help_6f9hih2hXXZk">Code</a>&nbsp;note with the <code>CSS</code> type.</li>
  <li><strong>Add the</strong>  <code>appCss</code>  <strong>Label</strong>: Annotate
    the note with the <code>#appCss</code>  <a href="#root/_help_zEY4DaJG4YT5">label</a>.</li>
  <li><strong>Write Your CSS</strong>: Add your custom CSS rules to the note.</li>
</ol>
<p>For example:</p><pre><code class="language-text-x-trilium-auto">/* Custom CSS to style specific elements */
.tree-item {
    color: #ff6347; /* Change tree item color */
}</code></pre>
<p>When Trilium's frontend starts, all notes labeled with <code>appCss</code> are
  automatically included in the style element of the HTML page.</p>
<p>After making changes, press <kbd>Ctrl</kbd> + <kbd>R</kbd> to reload the frontend
  and apply your new styles.</p>
<p>
  <img src="Themes_image.png">
</p>
<h3>Styling Specific Notes in the Tree</h3>
<p>To apply specific styles to certain notes in the tree:</p>
<ul>
  <li><strong>Use the</strong>  <code>cssClass</code>  <strong>Attribute</strong>:
    Add the <code>cssClass</code>  <a href="#root/_help_zEY4DaJG4YT5">attribute</a> to
    a note, and assign it a value representing the desired CSS class.</li>
  <li><strong>Define an</strong>  <code>iconClass</code>: You can also define
    a custom icon for a note using the <code>iconClass</code> attribute, selecting
    from <a href="https://boxicons.com">Box Icons</a> or your own custom classes.</li>
</ul>
<p>For example, if you want to style notes of a specific type, such as notes
  containing PNG images, you can target them with classes like <code>type-image mime-image-png</code>.</p>
<h3>User-Provided Themes</h3>
<p>A gallery of user-created themes is available, showcasing the variety
  of customizations that the Trilium community has developed. For more information,
  check the&nbsp;<a class="reference-link" href="#root/_help_VbjZvtUek0Ln">Theme Gallery</a>.</p>
<h3>Asset Path Management</h3>
<p>When referencing built-in assets like images in your custom themes or
  CSS, you can avoid hardcoding version numbers by using the <code>vX</code> alias.
  For example, instead of specifying <code>/assets/v0.57.0-beta/images/icon-grey.png</code>,
  you can use <code>/assets/vX/images/icon-grey.png</code> to keep your theme
  compatible with future versions of Trilium.</p>